<template>
  <div class="page">
    <div class="page-head">
      <div class="backBtn" @click="toBack">
        <van-icon size="18px" color="rgb(0, 85, 255)" name="arrow-left" />
      </div>
    </div>
    <div class="page-center">
      <div class="logo">
        <div class="icon">
          <img class="img" src="../assets/logo.png" mode="widthFix" alt="" srcset="">
        </div>
      </div>
      <div class="title">
        <div class="h1">欢迎登录</div>
        <div class="h6">请使用手机号登录，或者微信一键登录</div>
      </div>
      <div class="form-container">
        <van-cell-group inset>
          <!-- 输入任意文本 -->
          <van-field placeholder="请输入用户名" v-model="formData.userId" label="用户名" />
          <van-field placeholder="请输入密码" v-model="formData.passWord" type="password" label="密码" />
        </van-cell-group>
      </div>
      <div class="login-btn">
        <van-button @click="onClickHandle" type="primary" size="normal" block>登录</van-button>
      </div>
      <div class="wechat-login">
        <div class="wechat-login-btn">
          <div class="btn">
            <a style="font-size:12px;" @click="goRegister">前往注册</a>
          </div>
          <div class="tips">
            <van-checkbox icon-size="16px" v-model="formData.agree" style="font-size:12px">已阅读并同意
              <span style="color:rgb(6, 139, 216);font-size: 12px;">《商户服务及用户隐私协议》</span></van-checkbox>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { login } from "@/api/user";
import { reactive, ref } from "vue";
import { useStore } from "vuex";
import { getUrlParams } from "@/util/getUrlParam";
import { router } from "@/router";


export default {
  name: "LoginView",
  components: {

  },
  setup() {
    console.log("浏览器上带的userId",getUrlParams("userId") )
    const store = useStore();
    const formData = reactive({
      userId: getUrlParams("userId") || store.state.userInfo.userId || "",
      passWord: "",
      agree: true
    });
    const state = reactive({
      checked: true,
      loading: false,
      value: false
    });

    // 登录后跳转回到前面的页面
    const onClickHandle = async () => {
      try {
        console.log("点击了登录", formData)
        const { userId, passWord, agree } = formData;
        if (!userId) {
          showToast('请输入用户名');
          return;
        }
        if (!passWord) {
          showToast('请输入密码');
          return;
        }
        if (!agree) {
          showToast('请勾选用户协议');
          return;
        }
        login({
          url: "/users-api/login",
          params: {
            userId, passWord, agree
          },
          success: data => {
            console.log("登录成功", data);
            store.dispatch("login", data);
            console.log("需要重新定位 ", getUrlParams("redirect"));
            const name = getUrlParams("redirect");

            if (name) {
              // 需要重新定位
              router.push({ name });
              // console.log("需要重新定位 ",getUrlParams("redirect"))
            } else {
              router.push({ name: "home" });
            }
          },
          error: error => { },
          complete: () => {
            // history.back(-1);
            state.loading = false;
          }
        });

      } catch (error) {

      }



    };

    const goRegister = () => {
      router.push({
        name: "register",
        query: {
          redirect: "login"
        }
      });
    };
    return {
      // form,
      formData,
      state,
      onClickHandle,
      goRegister
    };
  }
};
</script>
<style lang="scss" scoped>
.page {
  // background-color: rgb(207, 80, 80);
  background-image: linear-gradient(134deg, rgba(209, 227, 255, 0.962), rgb(255, 255, 255), rgb(209, 227, 255));
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;

  .page-head {
    height: 64px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-left: 20px;
    // padding-bottom: 10px;

    .backBtn {
      width: 40px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
  }

  .page-center {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;

    .logo {
      padding: 40px;

      .icon {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        background-color: white;

        .img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .title {
      padding: 0 40px;

      .h1 {
        font-weight: bolder;
        font-size: 20px;
        padding: 5px 0;
      }

      .h6 {
        font-size: 12px;
        color: rgb(175, 175, 175);
      }
    }

    .form-container {
      padding: 20px;


    }

    .login-btn {
      width: 100%;
      padding: 0px 40px;
    }

    .wechat-login {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .wechat-login-btn {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .btn {
          width: 100px;
          height: 40px;
          border-radius: 50%;
          text-align: center;

          .img {
            width: 100%;
            height: 100%;
          }
        }

        .tips {
          padding: 5px 0px;

          .tips-context {
            font-size: 12px;
            color: whitesmoke;
          }
        }
      }
    }
  }
}
</style>